<template>
	<div class="Admin">

		<div class="Admin-Header">
			<div class="Admin-Header-Select">
				<el-select v-model="value" placeholder="请选择" ref='selectred'>
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="Admin-Header-Icon" @click="OpenDate()">
				<img src="static/img/Admin/date.png" width="100%"/>
			</div>
		</div>

		<div class="myChart-big" :style="{width:width + 'px', height: '280px'}">
			<div id="myChart" :style="{width:100 + '%', height: '280px'}">

			</div>
			<div class="myChart-Num" ref='Num' :style="{top:contHeight + 'px'}">
				<div class="myChart-Num-Title">
					账户余额
				</div>
				<div class="myChart-Num-Cont">
					1234567
				</div>
				<div class="myChart-Num-Proportion">
					<div class="myChart-Num-Proportion-Icon"><img src="static/img/Admin/up.png" width="100%" /></div>
					<div class="myChart-Num-Proportion-Cont">日2.6%</div>
				</div>
			</div>
		</div>
		<div class="Admin-myChart">
			<div class="Admin-myChart-Item" v-for='item in List2'>
				<div class="Admin-myChart-Item-Title">
					{{item.title}}
				</div>
				<div class="Admin-myChart-Item-Num">
					{{item.value}}
				</div>
				<div class="Admin-myChart-Item-Proportion">
					<div class="Admin-myChart-Item-Proportion-Icon">
						<img src="static/img/Admin/up.png" width="100%" />
					</div>
					<div class="Admin-myChart-Item-Proportion-cont">
						{{item.Proportion}}
					</div>
				</div>
			</div>
		</div>
		<div class="Admin-Margin"></div>
		<div class="Admin-Tab">
			<div class="Admin-Tab-Nav">
				<div class="Admin-Tab-Nav-left">
					<div class="Admin-Tab-Nav-left-icon">

					</div>
					<div class="Admin-Tab-Nav-left-cont">
						详细数据
					</div>
				</div>
				<div class="Admin-Tab-Nav-right">
					右划列表查看更多>>
				</div>
			</div>
			<div class="Admin-Tab-Scroll">
				<div class="Admin-Tab-Scroll-Line">
					<div class="Admin-Tab-Scroll-Line2" :style="{left:ScrollLeft + '%'}"></div>

				</div>
			</div>
			<div class="Admin-Tab-Table" ref='Table' @scroll="Scroll">
				<table border="1" class="Admin-TableDetail" ref='Table2' cellspacing="0" cellpadding="0">
					<thead>
						<th>时间</th>
						<th>所属名称</th>
						<th>收入</th>
						<th>新会员</th>
						<th>内容UV</th>
						<th>转化率</th>
					</thead>
					<tbody>
						<tr v-for="item in ListTab">
							<td>{{item.time}}</td>
							<td>{{item.name}}</td>
							<td>{{item.money}}</td>
							<td>{{item.vip}}</td>
							<td>{{item.uv}}</td>
							<td>{{item.bfb}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="">
			<mt-datetime-picker ref="picker" type="date" v-model="pickerValue" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm">
			</mt-datetime-picker>
			<Message :mes="mes" :check='TdChecked' v-on:check="check1"></Message>
		</div>
	</div>
</template>

<script>
	import { DatetimePicker } from 'mint-ui';
	import Message from '@/assets/assembly/Message'
	export default {
		name: 'Admin',
		data() {
			return {
				TdChecked: false,
				mes:'',
				pickerValue: '2018-05-06',
				height: '',
				width: '',
				contHeight: '',
				ScrollLeft: 0,
				ListTab: [{
					'time': '11:00-11:59',
					'name': '春田花花幼儿园A',
					'money': '39',
					'vip': '55',
					'uv': '944',
					'bfb': '20.55%'
				}, {
					'time': '11:00-11:59',
					'name': '春田花花幼儿园A',
					'money': '39',
					'vip': '55',
					'uv': '944',
					'bfb': '20.55%'
				}, {
					'time': '11:00-11:59',
					'name': '春田花花幼儿园A',
					'money': '39',
					'vip': '55',
					'uv': '944',
					'bfb': '20.55%'
				}, {
					'time': '11:00-11:59',
					'name': '春田花花幼儿园A',
					'money': '39',
					'vip': '55',
					'uv': '944',
					'bfb': '20.55%'
				}, {
					'time': '11:00-11:59',
					'name': '春田花花幼儿园A',
					'money': '39',
					'vip': '55',
					'uv': '944',
					'bfb': '20.55%'
				}, {
					'time': '11:00-11:59',
					'name': '春田花花幼儿园A',
					'money': '39',
					'vip': '55',
					'uv': '944',
					'bfb': '20.55%'
				}],
				List: [{
					'title': '账户余额/元',
					'value': 1234567
				}, {
					'title': '今日收入金额/元',
					'value': 12500
				}, {
					'title': '今日支出金额/元',
					'value': 10500
				}, {
					'title': '今日缴费人数/位',
					'value': 203
				}],
				List2: [{
					'title': '今日收入/元',
					'value': '12500.00',
					'Proportion': '日2.6%'
				}, {
					'title': '今日支出/元',
					'value': '10500.00',
					'Proportion': '日2.6%'
				}, {
					'title': '今日缴费人数/位',
					'value': 203,
					'Proportion': '日2.6%'
				}],
				options: [{
					value: '春田花花幼儿园',
					label: '春田花花幼儿园'
				}, {
					value: '秋田花花幼儿园',
					label: '秋田花花幼儿园'
				}, {
					value: '冬田花花幼儿园',
					label: '冬田花花幼儿园'
				}, {
					value: '夏田花花幼儿园',
					label: '夏田花花幼儿园'
				}],
				value: ''
			}
		},
		created: function() {
			var myDate = new Date();
			this.pickerValue = myDate
		},
		components: {
			DatetimePicker,Message
		},
		mounted() {
			var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			this.width = w
			this.height = h
			//创建图表,要修改数据的话则要再之前修改
			this.drawLine();
			this.contHeight = 155 - this.$refs.Num.offsetHeight / 2

		},
		methods: {
			Scroll() {
				var wid = parseInt(this.$refs.Table.scrollLeft) + parseInt(this.$refs.Table.offsetWidth)
				var wid2 = this.$refs.Table2.offsetWidth
				var wid3 = wid / wid2
				wid3 = Math.round(wid3 * 100) - 60
				if(this.$refs.Table.scrollLeft == 0) {
					wid3 = 0
				}
				this.ScrollLeft = wid3
			},
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				// 绘制图表
				myChart.setOption({
					title: {
						text: ''
					},
					tooltip: {
						show: false,
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)",
					},
					legend: {
						orient: 'vertical',
						icon: 'rect',
						x: '67%',
						y: 'center',
						borderRadius: [0, 0, 0, 0],
						itemWidth: 15,
						itemHeight: 15,
						padding: [16, 7, 16, 0],
						textStyle: {
							color: '#9a9a9a',
							fontSize: 12
						},
						data: [this.List[0].title, this.List[1].title, this.List[2].title, this.List[3].title]
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: ['45%', '75%'],
						avoidLabelOverlap: false,
						center: ['32%', '51%'],
						legendHoverLink: false,
						hoverAnimation: false,
						hoverOffset: 0,
						selectedOffset: 0,
						minAngle: 35, //最小扇区
						clockWise: false,
						label: {
							normal: {
								show: true,
								position: 'inner',
								formatter: '{c}',
								fontStyle: 'normal',
								fontSize: '11',
							},
							emphasis: {
								show: false,
								textStyle: {
									fontSize: '30',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: [{
								value: this.List[0].value,
								name: this.List[0].title
							},
							{
								value: this.List[1].value,
								name: this.List[1].title
							},
							{
								value: this.List[2].value,
								name: this.List[2].title
							},
							{
								value: this.List[3].value,
								name: this.List[3].title
							}
						]
					}],
					color: ['#f9a01f', '#ffb74d', '#ffcc80', '#ffe0b2']
				});
			},
			OpenDate() {
				if(this.value=='')
				{
					this.mes = '请选择幼儿园'
					this.TdChecked = true
				}
				else
				{
					this.$refs.picker.open();
				}
				
			},
			handleConfirm(e) {
				console.log(e)
			},
			check1(e) {
				this.TdChecked = e
			}
		}
	}
</script>

<style scoped>
	@import url("css/Admin.css");
</style>